<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="a" style="margin-bottom: 200px">
    <fieldset>
        <legend>if:注册</legend>
        <a href="#" @click="flag='email'">邮箱注册</a>
        <a href="#" @click="flag='phone'">手机注册</a>
        <a href="#" @click="flag='chat'">微信注册</a>
        使用key给控件加唯一标识，避开控件缓存
        <div v-if="flag=='email'">
            邮箱地址:<input key="1">
        </div>
        <div v-else-if="flag=='phone'">
            手机号码:<input key="2">
        </div>
        <div v-else>
            微信号码:<input>
        </div>
    </fieldset>

    <fieldset>
        <legend>show:成绩</legend>
        分数：<input type="number" v-model="score">
        <span v-show="score < 60">不及格</span>
        <span v-show="score >= 60&&score<80">及格</span>
        <span v-show="score >= 80&&score<90">良好</span>
        <span v-show="score >= 90">优秀</span>
    </fieldset>

    <fieldset>
        <legend>for</legend>
        <span v-for=" like,i in likeItems " >
            <input type="radio" value="like">{{i}}.{{like}}
        </span>
        <hr>
        <div v-for=" value,name,i in hero " >
            {{i}}:{{name}}:{{value}}
        </div>
        <hr>
        <span v-for=" i in 5 " >
            {{i}},
        </span>


    </fieldset>


</div>

<script>
    var v = new Vue({
        el:"#a",
        data:{
            flag:"email",
            score:0,
            likeItems:['篮球','电影','手游','睡觉'],
            hero:{
                name:"武松",
                gender:"男",
                age:28
            }
        }
    })
</script>


</body>
</html>